<template>
  <div class="calendars">
    <div class="con">
      <div class="now-data-myself">
        <div class="now-data-myself-time">{{ date }}</div>
        <div class="now-data-myself-week">{{ week }}</div>
      </div>
      <Calendar v-on:choseDay="clickDay"
                v-on:changeMonth="changeDate"
                v-on:isToday="clickToday"></Calendar>
    </div>
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component' // 日历组件
export default {
  components: {
    Calendar
  },
  data() {
    return {
      date: '',
      week: ''
    }
  },
  methods: {
    clickDay(data) {},
    changeDate(data) {},
    clickToday(data) {}
  },
  created() {
    let now = new Date()
    this.date = now.getDate() //得到日期
    let day = now.getDay() //得到周几
    let arr_week = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')
    this.week = arr_week[day]
  }
}
</script>

<style lang="less" scoped>
/*日历 */
::v-deep .con {
  margin-top: 40px;
  position: relative;
  .wh_content_all {
    padding: 10px 13px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 12px;
    box-sizing: border-box;
  }
  /* 星期，日期 */
  .now-data-myself {
    margin-top: 10px;
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 50px;
    position: absolute;
    border-right: 1px solid rgba(227, 227, 227, 0.6);

    .now-data-myself-time {
      font-size: 20px;
      color: #33c5c5;
    }
    .now-data-myself-week {
      font-size: 12px;
    }
  }
  /* 年，月 */
  .wh_top_changge {
    margin-left: 30%;
    width: 70%;
    li {
      color: #000;
      .wh_jiantou1 {
        width: 5px;
        height: 5px;
        border-top: 2px solid #ccc;
        border-left: 2px solid #ccc;
      }
      .wh_jiantou2 {
        width: 5px;
        height: 5px;
        border-top: 2px solid #ccc;
        border-right: 2px solid #ccc;
      }
    }
    .wh_content_li {
      font-size: 14px;
      color: #33c5c5;
    }
  }
  .wh_content {
    .wh_content_item {
      font-size: 14px;
      height: 35px;
      /* 头部星期标签 */
      .wh_top_tag {
        width: 35px;
        height: 35px;
        line-height: 35px;
      }
      /* 当天日期背景色 */
      .wh_isToday {
        color: #fff;
        background-color: rgba(51, 197, 197, 0.7);
        border-radius: 50%;
      }
      /* 选中的背景颜色 */
      .wh_chose_day {
        color: #fff;
        border-radius: 50%;
        background-color: #ff6666;
      }
      .wh_item_date {
        width: 35px;
        height: 35px;
        line-height: 35px;
        &:hover {
          color: #fff;
          border-radius: 50%;
          background: #ff6666;
        }
      }
    }
  }
}
</style>